<template>
  <el-main>
    <!--    导航栏-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="elmenu=true">退租物业交割单</el-menu-item>
      <el-menu-item index="2" :disabled="elmenu">解约协议</el-menu-item>
    </el-menu>
    <!--   导航栏 结束 -->
    <br/>
    <br/>
    <el-form v-show="activeIndex=='1'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-col :span="24">
        <el-form-item label-width="130px" label="收房合同号" prop="sfContractId">
          <el-col :span="12">
            <el-input v-model="ruleForm.sfContractId" disabled :style="{width: '70%'}"></el-input>
          </el-col>
          <el-button type="warning" @click="sdQeury">收房合同查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="收房合同编号" prop="sfContractNo" label-width="130px">
          <el-input v-model="ruleForm.sfContractNo" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房产信息" prop="houseName" label-width="130px">
          <el-input v-model="ruleForm.houseName" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
      <el-col :span="12">
        <el-form-item label="产权地址" prop="cqAddress" label-width="130px">
          <el-input v-model="ruleForm.cqAddress" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房产证书编号" prop="houseZsNo" label-width="130px">
          <el-input v-model="ruleForm.houseZsNo" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      </el-col>
      <el-col :span="24">
      <el-col :span="12">
        <el-form-item label="业主姓名" prop="ownerName" label-width="130px">
          <el-input v-model="ruleForm.ownerName" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业主联系方式" prop="ownerMobile" label-width="130px">
          <el-input v-model="ruleForm.ownerMobile" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      </el-col>
      <el-col :span="24">
      <el-col :span="12">
        <el-form-item label="签约人姓名" prop="signUserName" label-width="130px">
          <el-input v-model="ruleForm.signUserName" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约人电话" prop="signUserMobile" label-width="130px">
          <el-input v-model="ruleForm.signUserMobile" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      </el-col>
      <el-col :span="12">
        <el-form-item label="物业交割日期" prop="wyjgDate" label-width="130px">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="ruleForm.wyjgDate"
            type="date"
            placeholder="选择日期" :style="{width: '80%'}">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解约类型" prop="terminationType" label-width="130px">
          <el-select v-model="ruleForm.terminationType" placeholder="请选择解约类型" :style="{width: '80%'}">
            <el-option label="合同到期" :value="1"></el-option>
            <el-option label="业主提前解约" :value="2"></el-option>
            <el-option label="我方退租解约" :value="3"></el-option>
            <el-option label="其他" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark" label-width="130px">
          <el-input type="textarea" size="200" v-model="ruleForm.remark" :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <br/>
      <br/>
      <el-col :span="24">
          <div class="c_shouldBack">应退
          <br>
            <el-table
              :data="paymentData">
              <el-table-column
                label="类型">
                <template slot-scope="scope">
                  {{scope.row.itemType=='1'?'水费':scope.row.itemType=='2'?'电费':scope.row.itemType=='3'?'煤/燃气费':scope.row.itemType=='80'?'租金':scope.row.itemType=='81'?'押金':scope.row.itemType=='90'?'解约结算':'其它'}}
                </template>
              </el-table-column>
              <el-table-column
                prop="paymentAmount"
                label="金额">
              </el-table-column>
              <el-table-column
                label="备注">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="warning" @click="del(scope.row.id)" class="el-icon-delete" plain></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
      </el-col>

      <el-col :span="24">
        <div class="c_shouldBack">应收
          <br>
          <el-table
            :data="paymentData2">
            <el-table-column
              label="类型">
              <template slot-scope="scope">
                {{scope.row.itemType=='1'?'水费':scope.row.itemType=='2'?'电费':scope.row.itemType=='3'?'煤/燃气费':scope.row.itemType=='80'?'租金':scope.row.itemType=='81'?'押金':scope.row.itemType=='90'?'解约结算':scope.row.itemType=='100'?'押金':'其它'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="金额">
            </el-table-column>
            <el-table-column
              label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="warning" @click="del(scope.row.id)" class="el-icon-delete" plain></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24">
        <div style="width: 1200px">
          <el-form-item>
            <br><br>
            <div style="float: right" >合计(
              <span style="color: orange">应退</span>)=:{{this.totalmoney}}元
            </div>
            <br/>
            <el-button type="primary" @click="submitForm('ruleForm')" style="float: right">&emsp;&emsp;下一步</el-button>
            <el-button @click="resetForm('ruleForm')" style="float: right">取消</el-button>
          </el-form-item>
        </div>
      </el-col>
    </el-form>


<!--    收房合同查询-->
    <el-dialog title="收房合同查询" :visible.sync="open">
      <el-form :inline="true" :model="queryData" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="queryData.premiseName"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="queryData.ownerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="sdQeury">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData">
        <el-table-column property="ownerName" label="业主姓名"></el-table-column>
        <el-table-column property="houseName" label="房产信息"></el-table-column>
        <el-table-column property="conSignTime" label="签约日期">
          <template slot-scope="scope">
            <span v-if="scope.row.conSignTime!= null">
              {{ parseTime(scope.row.conSignTime, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="IsOn(scope.row.id)" plain>选中</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryData.pageNum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="this.queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </el-dialog>


<!--    解约协议-->
    <!--    合同附件-->
    <div v-show="activeIndex == '2'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>解约合同</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove3">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>物业交割单</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload2"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove2">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>其他</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload3"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove1">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <div>
        <el-button type="primary" @click="add" style="float: right">保存</el-button>
        <el-button type="warning" @click="activeIndex = '1',elmenu = true">上一步</el-button>
      </div>
    </div>
  </el-main>
</template>

<script>
import {terminationList, terminationIsOn, addTermination} from "@/api/contract/termination";
import {upload} from "@/api/contract/charge/houseinfo";
// import { upload } from "@/api/contract/charge/houseinfo";


export default {
  name: "entering",
  data() {
    return{
      //应退总价
      totalmoney: undefined,
      //应退
      paymentData: [],
      //应收
      paymentData2:[
        {
          itemType: '100',
          paymentAmount: undefined
        }
      ],
      //收房查询开关
      open:false,
      //收房数据
      tableData: [],
      queryID:{
        sfContractId: undefined
      },
      queryData:{
        pageNum : 1,
        pageSize : 10,
        ownerName: undefined,
        houseName: undefined,
        conSignTime: undefined
      },
      total: undefined,
      /*列表*/
      ruleForm: {
        sfContractId:undefined,
        sfContractNo:undefined,
        houseName:undefined,
        cqAddress:undefined,
        houseZsNo:undefined,
        ownerName:undefined,
        ownerMobile:undefined,
        signUserName:undefined,
        signUserMobile: undefined,
        wyjgDate: undefined,
        terminationType:undefined,
        remark: undefined,
        contractPhotos: [],
        propertyDeliverys: [],
        otherPhotos: [],
      },
      /*导航*/
      elmenu: true,
      activeIndex: '1',
      rules: {
        sfContractId: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        sfContractNo: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        houseName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        cqAddress: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        houseZsNo: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        ownerName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        ownerMobile: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        signUserName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        signUserMobile: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        remark: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        wyjgDate: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        terminationType: [
          { required: true, message: '至少选择一条', trigger: 'blur' },
        ]
      }
    }
  },
  methods :{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeIndex = '2';
          this.elmenu = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //收房合同查询
    sdQeury() {
      this.open = true;
      terminationList(this.queryData).then(res=>{
        console.log("查询合同信息:", res);
        this.tableData = res.msgData.list;
        this.queryData.pageSize = res.msgData.pageSize;
        this.queryData.pageNum = res.msgData.pageNum;
        this.total = res.msgData.total;
      })
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.queryData.pageSize = pageSize;
      this.queryData.pageNum = 1;
      this.sdQeury();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.queryData.pageNum = pageNum;
      this.sdQeury();
    },
    //选中
    IsOn(id) {
      this.open = false;
      console.log("选中ID:", id);
      this.queryID.sfContractId = id;
      terminationIsOn(this.queryID).then(res=>{
        console.log("选中数据:", res);
        this.paymentData=[];
        this.paymentData2=[{
          itemType: '100',
          paymentAmount: undefined
        }];
        this.ruleForm.sfContractId = res.msgData.id;
        this.ruleForm.sfContractNo = res.msgData.sfContractNo;
        this.ruleForm.cqAddress = res.msgData.cqAddress;
        this.ruleForm.houseName = res.msgData.houseName;
        this.ruleForm.houseZsNo = res.msgData.houseZsNo;
        this.ruleForm.ownerName = res.msgData.ownerName;
        this.ruleForm.ownerMobile = res.msgData.ownerMobile;
        this.ruleForm.signUserMobile = res.msgData.signUserMobile;
        this.ruleForm.signUserName = res.msgData.signUserName;
        this.ruleForm.remark = res.msgData.remark;

        var count;
          //应退    已付款的
        for (const re of res.msgData.paymentList) {
          if (re.payState == 2) {
            if (re.itemType) {
              if (this.paymentData.length != 0) {
                count=0;
                for (const p of this.paymentData) {
                  if (p.itemType == re.itemType) {
                    count++;
                    p.paymentAmount += re.paymentAmount;
                    break;
                  }
                }
                if (count == 0) {
                  this.paymentData.push(re);
                }
              }else {
                this.paymentData.push(re);
              }
            }
          }
        }
      //押金
        this.paymentData2[0].paymentAmount = res.msgData.depositMoney;
          //应收    未付款的
        for (const re of res.msgData.paymentList) {
          if (re.payState == 1) {
            if (re.itemType) {
              if (this.paymentData2.length != 0) {
                count=0;
                for (const p of this.paymentData2) {
                  if (p.itemType == re.itemType) {
                    count++;
                    p.paymentAmount += re.paymentAmount;
                    break;
                  }
                }
                if (count == 0) {
                  this.paymentData2.push(re);
                }
              }else {
                this.paymentData2.push(re);
              }
            }
          }
        }


        //应退总价计算
        var num1 = 0.00;
        var num2 = 0.00;
        if (this.paymentData.length != 0) {
          for (const p1 of this.paymentData) {
            num1 += p1.paymentAmount;
          }
        }
        if (this.paymentData2.length != 0) {
          for (const p2 of this.paymentData2) {
            num2 += p2.paymentAmount;
          }
        }

        //结算合计，为正应收， 为负数的时候是应退
        this.totalmoney = num1 - num2;
      })
    },

    //附件处理
    // 覆盖默认的上传行为
    requestUpload1(fileObj) {
      var formData = new FormData()
      formData.append('file', fileObj.file)
      upload(formData, fileObj).then(res => {
        console.log("图片上传", res, fileObj)
        fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
        this.ruleForm.contractPhotos.push(res.imgUrl)
      })
    },
    // 覆盖默认的上传行为
    requestUpload2(fileObj) {
      var formData = new FormData()
      formData.append('file', fileObj.file)
      upload(formData, fileObj).then(res => {
        console.log("图片上传", res, fileObj )
        fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
        this.ruleForm.propertyDeliverys.push(res.imgUrl)
      })
    },
    // 覆盖默认的上传行为
    requestUpload3(fileObj) {
      var formData = new FormData()
      formData.append('file', fileObj.file)
      upload(formData, fileObj).then(res => {
        console.log("图片上传", res, fileObj)
        fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
        this.ruleForm.otherPhotos.push(res.imgUrl)
      })
    },
    //上传之前
    beforeAvatarUpload(file) {
      console.log(file)
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt1M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      console.log("handlePictureCardPreview", file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片附件上传.删除
    handleRemove1(file, fileList) {
      console.log("上传.删除")
      console.log(file, fileList);
      //删除
      this.ruleForm.otherPhotos.some((pic, i) => {
        if (pic == file.response) {
          this.ruleForm.otherPhotos.splice(i, 1)
          return true;
        }
      })
    },
    handleRemove2(file, fileList) {
      console.log("上传.删除")
      console.log(file, fileList);
      //删除
      this.ruleForm.propertyDeliverys.some((pic, i) => {
        if (pic == file.response) {
          this.ruleForm.propertyDeliverys.splice(i, 1)
          return true;
        }
      })
    },
    handleRemove3(file, fileList) {
      console.log("上传.删除")
      console.log(file, fileList);
      //删除
      this.ruleForm.contractPhotos.some((pic, i) => {
        if (pic == file.response) {
          this.ruleForm.contractPhotos.splice(i, 1)
          return true;
        }
      })
    },
    //保存解约信息
    add() {
      console.log("保存解约信息:", this.ruleForm);
      addTermination(this.ruleForm).then(res=>{
        console.log("保存成功");
        this.ruleForm.sfContractId=undefined;
        this.ruleForm.sfContractNo=undefined;
        this.ruleForm.houseName=undefined;
        this.ruleForm.cqAddress=undefined;
        this.ruleForm.houseZsNo=undefined;
        this.ruleForm.ownerName=undefined;
        this.ruleForm.ownerMobile=undefined;
        this.ruleForm.signUserName=undefined;
        this.ruleForm.signUserMobile= undefined;
        this.ruleForm.wyjgDate=undefined;
        this.ruleForm.terminationType=undefined;
        this.ruleForm.remark=undefined;
        this.ruleForm.contractPhotos= [];
        this.ruleForm.propertyDeliverys= [];
        this.ruleForm.otherPhotos= [];
        this.activeIndex = '1';
        this.$router.push("/contract/cancellist");
      })
    },
  },
  created() {

  }
}
</script>

<style scoped>
.c_shouldBack{
  width: 1200px;
  border:solid 1px #ddd;
  margin-left: 48px;
  border-bottom: none;
  margin-bottom: -10px;
  border-top: solid 5px #ffa800;
  padding: 7px 0px;
  text-indent: 5px;
  margin-top: 40px;
}

</style>
